class Board {
  constructor(dom) {
    this.ROAD_NUM = 19;
    this.dom = dom;
    this.width = Math.max(dom.offsetWidth, dom.offsetHeight);
    this.height = this.width;
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext("2d");
    this.gridWidth = this.height / (this.ROAD_NUM + 1);
    this.onclick = () => { };
    this._initCanvas();
    this._drawBoard();
    this._drawStars();
    dom.onclick = (e) => {
      var g = this.gridWidth;
      var x = e.offsetX - g;
      var y = e.offsetY - g;
      var i = Math.round(x / g);
      var j = Math.round(y / g);
      if (i < this.ROAD_NUM && j < this.ROAD_NUM) {
        this.onclick(i, j);
      }
    }
  }

  BLACK_COLOR = 'H';
  NULL_CHESS = 'O';
  WHITE_COLOR = 'B';

  _initCanvas() {
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.canvas.style.background = '#a97652';
    this.canvas.style.cursor = 'pointer';
    this.dom.appendChild(this.canvas);
  };

  _drawBoard() {
    this.context.lineWidth = 1;
    this.context.strokeStyle = '#000000';
    var g = this.gridWidth;
    var w = this.width;
    for (var i = 0; i < this.ROAD_NUM; i++) {
      this.context.beginPath();
      this.context.strokeStyle = '#272822'
      this.context.moveTo(g + i * g + 0.5, g);
      this.context.lineTo(g + i * g + 0.5, w - g);
      this.context.stroke();
      this.context.moveTo(g, g + i * g + 0.5);
      this.context.lineTo(w - g, g + i * g + 0.5);
      this.context.stroke();
    }
  }

  /*画特殊星位*/
  _createStar(k, l) {
    var g = this.gridWidth;
    this.context.beginPath();
    this.context.fillStyle = '#2C2924';
    this.context.arc(g + k * g, g + l * g, 4, 0, 2 * Math.PI);
    this.context.fill();
    this.context.closePath();
  }

  _drawStars() {
    var c = (this.ROAD_NUM - 1) / 2;
    var s = (this.ROAD_NUM / 4) > 3 ? 3 : 2;
    var e = (this.ROAD_NUM - 1) - s;
    this._createStar(s, s);
    this._createStar(s, c);
    this._createStar(s, e);
    this._createStar(c, s);
    this._createStar(c, c);
    this._createStar(c, e);
    this._createStar(e, s);
    this._createStar(e, c);
    this._createStar(e, e);
  };

  /*画棋子*/
  drawOneStep(i, j, type) {
    if (type == this.NULL_CHESS) {
      return;
    }
    var g = this.gridWidth;
    this.context.beginPath();
    var gColor = this.context.createRadialGradient(g + i * g + 2, g + j * g - 2, 13, g + i * g + 2, g + j * g - 2, 0);
    if (type === this.BLACK_COLOR) {
      gColor.addColorStop(0, '#0a0a0a');
      gColor.addColorStop(1, '#636766');
    } else if (type = this.WHITE_COLOR) {
      gColor.addColorStop(0, '#d1d1d1');
      gColor.addColorStop(1, '#f9f9f9');
    }
    this.context.fillStyle = gColor;
    this.context.arc(g + i * g, g + j * g, g / 2 - 1, 0, 2 * Math.PI);
    this.context.fill();
    this.context.closePath();
  }


  // readStep(i, j, type) {
  //   this._drawOneStep(i, j, type)
  // }

  clear() {
    this._initCanvas();
    this._drawBoard();
    this._drawStars();
  }
};